<script setup>
import { RouterView } from 'vue-router'
import { ref } from 'vue'

// 用于控制过渡动画的方向
const transitionName = ref('slide-left')

// 监听路由变化，根据路由层级决定动画方向
function onBeforeEnter() {
  // 可以根据需要添加进入前的逻辑
}
</script>

<template>
  <router-view v-slot="{ Component, route }">
    <transition 
      :name="transitionName" 
      mode="out-in"
      @before-enter="onBeforeEnter"
    >
      <component :is="Component" :key="route.path" />
    </transition>
  </router-view>
</template>

<style lang="scss">
/* 页面过渡动画 */
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.slide-left-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.slide-left-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-enter-from {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

.fade-leave-to {
  opacity: 0;
  transform: translateY(-20px) scale(1.05);
}

/* 缩放动画 */
.scale-enter-active,
.scale-leave-active {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scale-enter-from {
  opacity: 0;
  transform: scale(0.8) rotate(5deg);
}

.scale-leave-to {
  opacity: 0;
  transform: scale(1.1) rotate(-5deg);
}

/* 全局页面容器样式 */
#app {
  position: relative;
  overflow: hidden;
}
</style>

